<template>
  <div :class="itemClasses">
    <div :class="headerClasses" @click="toggle">
      <slot></slot>
      <Icon
        type="ios-arrow-forward"
        v-if="!hideArrow"
        style="margin-top: 0.638rem;
          float: right;"
      />
    </div>
    <div :class="contentClass" v-show="isActive">
      <div :class="boxClasses">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>

<script>
const prefixCls = "ivu-collapse";
export default {
  name: "UPanel",
  data() {
    return {
      index: 0,
      isActive: false,
    };
  },
  props: {
    name: {
      type: String,
    },
    hideArrow: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    itemClasses() {
      return [
        `${prefixCls}-item`,
        {
          [`${prefixCls}-item-active`]: this.isActive,
        },
      ];
    },
    // 定义header样式
    headerClasses() {
      return `${prefixCls}-header`;
    },
    contentClass() {
      return `${prefixCls}-content`;
    },
    boxClasses() {
      return `${prefixCls}-content-box`;
    },
  },
  methods: {
    toggle() {
      // console.log(this);
      this.$parent.toggle({
        name: this.name || this.index,
        isActive: this.isActive,
      });
    },
  },
};
</script>

<style  scoped>
.collapse-dot {
  width: 8px;
  height: 20px;
  background-color: #2d8cf0;
  display: inline-block;
  position: absolute;
  top: 50%;
  left:0;
  transform: translateY(-10px);
  border-radius: 4px;
}
</style>
